<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">姓名</span>
      <el-input v-model="name" size="medium" clearable disabled class="inline-input" placeholder="菅琦伯"></el-input>

      <span class="txt">工号</span>
      <el-input v-model="number" size="medium" clearable disabled class="inline-input" placeholder="00000001"></el-input>

      <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="onSubmit">查询</el-button>
    </form>

    <div class="map">
      <baidu-map id="allmap" :center="center" :zoom="zoom"></baidu-map>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface"
import BMap from "BMap"

export default {
  name: "StaffLocation",
  components: {},
  data() {
    return {
      name: "",
      number: "",
      center: {
        lng: 0,
        lat: 0
      },
      zoom: 3,
      userLocationInfo: []
    };
  },

  mounted() {
    this.ready();
  },

  methods: {
    ready: function() {
      var map = new BMap.Map("allmap");  // 创建Map实例
      var point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 16);  // 初始化地图,设置中心点坐标和地图级别
      var dataInfo = [
        // [116.417854, 39.921988, "正柔国", "009133"],
        // [116.406605, 39.921585, "铁河星", "007460"],
        // [116.412222, 39.912345, "莫林蓓", "008837"]
      ];
      var pointArray = new Array();
      var opts = {
        width : 90,     // 信息窗口宽度
        height: 60,     // 信息窗口高度
        enableMessage: true   // 设置允许信息窗发送短息
      };

      if (dataInfo.length > 0) {
        for(var i = 0; i < dataInfo.length; i ++){
          var marker = new BMap.Marker(new BMap.Point(dataInfo[i][0], dataInfo[i][1]));  // 创建标注
          var content = `
          <div style="padding: 2px 8px;">
            <div style="font-size: 16px; color: #333;">${dataInfo[i][2]}</div>
            <div style="font-size: 14px; color: #999;margin-top: 2px;">${dataInfo[i][3]}</div>
          </div>
        `;
          map.addOverlay(marker);   // 将标注添加到地图中
          pointArray[i] = new BMap.Point(dataInfo[i][0], dataInfo[i][1]);
          openInfo(content, dataInfo[i][0], dataInfo[i][1]);
          // 点击事件
          // addClickHandler(content, marker);
        }
      }

      function openInfo(content, lng, lat) {
        var point = new BMap.Point(lng, lat);

        var label = new BMap.Label(content, {
          offset: new BMap.Size(20,-10)
        });
        label.setStyle({
          border: "1.6px solid #389830",
          borderRadius: "6px",
          boxShadow: "0 2px 12px rgba(0, 0, 0, .2)"
        });
	      marker.setLabel(label);
      }

      map.setViewport(pointArray);
      map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    },

    // 查询
    onSubmit() {

    }
  }
};
</script>

<style  scoped>
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}

.map {
  width: 100%;
  height: calc(100vh - 160px);
}

#allmap {
  width: 100%;
  height: 100%;
}

/* 隐藏地图logo */
#allmap >>> .anchorBL {
  display: none;
}
</style>
